<template>
	<a-modal v-bind="options" v-on="events">
		<a-textarea v-model:value="house.houseRoomDetail.comment" placeholder="请输入备注" :maxlength="500" showCount :auto-size="{minRows: 8}" />

		<template #footer>
			<a-button type="primary" html-type="submit" @click="submit">保存</a-button>
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
	import {reactive, toRef} from 'vue'
	import {HouseDetail} from '@/interface/house'
	import houseApi from '@/api/house-api'
	import {message} from 'ant-design-vue'

	const props = defineProps<{
		visible: boolean
		house: HouseDetail
	}>()

	const house = toRef(props, 'house')

	const options = reactive({
		title: '添加备注',
		width: 480,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		class: 'house-add-note',
		visible: toRef(props, 'visible')
	})

	const emits = defineEmits(['update:visible', 'close'])
	const events = reactive({
		cancel() {
			emits('update:visible', false)
		}
	})

	const submit = () => {
		let params = {
			id: house.value.id,
			comment: house.value.houseRoomDetail?.comment
		}
		houseApi
			.addComment(params)
			.then(() => {
				message.success('保存成功')
			})
			.finally(() => {
				emits('close')
				emits('update:visible', false)
			})
	}
</script>

<style lang="less">
	.house-add-note {
		.ant-modal-body {
			padding: 20px;
			overflow: auto;
			min-height: 236px;
			max-height: 900px;
		}
	}
</style>
